<script setup lang="ts">
import { Cell } from '@antv/x6'
import { DeviceDataset } from '@yk/components/draw/editor-draw/dataset'
import { getVariableListByDeviceIdAPI } from '@/api/variable'

const props = defineProps<{
  cell: Cell | any,
  solution: Record<string, any>
}>()

let _cell = toRaw(props.cell)

watch(() => props.cell, () => {
  _cell = toRaw(props.cell)
  init()
})

onMounted(() => {
  init()
  getDeviceList()
})

// region TODO 初始化
function init () {
  if (props.solution.init) {
    saveForm.value = props.solution.init()
  } else {
    saveForm.value = {
      deviceId: _cell.data.dataConfig.deviceId,
      variableId: _cell.data.dataConfig.variableId,
      variableAddress: _cell.data.dataConfig.variableAddress
    }
    getVariableList()
  }
}
// endregion

// region TODO 表单
const saveForm = ref({
  deviceId: null,
  variableId: null,
  variableAddress: null
})
// endregion

// region TODO 绑定
function bindVariableId () {
  if (!saveForm.value.variableId) {
    ElMessage.info('未选择变量')
    return
  }
  if (props.solution.bindVariable) {
    props.solution.bindVariable(_cell, saveForm.value)
  } else {
    _cell.data.dataConfig.deviceId = saveForm.value.deviceId
    _cell.data.dataConfig.variableId = saveForm.value.variableId
  }
}

function bindVariableAddress () {
  if (!saveForm.value.variableAddress) {
    ElMessage.info('未选择变量')
    return
  }
  if (props.solution.bindVariable) {
    props.solution.bindVariable(_cell, saveForm.value)
  } else {
    _cell.data.dataConfig.deviceId = saveForm.value.deviceId
    _cell.data.dataConfig.variableAddress = saveForm.value.variableAddress
  }
}
// endregion

// region TODO 设备
const deviceList = shallowRef([])
function getDeviceList () {
  DeviceDataset.getDeviceList().then((data) => {
    deviceList.value = data
  })
}
function deviceChangeHandle () {
  saveForm.value.variableId = null
  saveForm.value.variableAddress = null
  getVariableList()
}
// endregion

// region TODO 变量
const variableList = shallowRef([])
function getVariableList () {
  if (saveForm.value.deviceId) {
    getVariableListByDeviceIdAPI({
      id: saveForm.value.deviceId
    }).then((res) => {
      res.result().then((rdata) => {
        variableList.value = rdata.data || []
      })
    })
  }
}
// endregion
</script>

<template>
  <el-collapse-item title="绑定设备变量" name="BindDeviceVariable">
    <el-form-item label="设备">
      <el-select v-model="saveForm.deviceId" @change="deviceChangeHandle">
        <el-option v-for="item in deviceList" :key="item.id" :label="item.deviceName" :value="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="变量">
      <el-select v-if="props.solution.isBindVariableId" v-model="saveForm.variableId" @change="bindVariableId">
        <el-option v-for="item in variableList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-select v-else v-model="saveForm.variableAddress" @change="bindVariableAddress">
        <el-option v-for="item in variableList" :key="item.id" :label="item.name" :value="item.address" />
      </el-select>
    </el-form-item>
  </el-collapse-item>
</template>

<style scoped lang="scss">

</style>
